<template>
  <div>
    <van-form @submit="toLogin">
      <div class="infoArea">
        <van-field
          v-model="idNumber"
          label="身份证号"
          name="idNumber"
          :rules="[{ pattern: idnoTest, message: '请填写正确的身份证号' }]"/>

        <van-field
          v-model="tel"
          type="tel"
          label="手机号码"
          name="tel"
          :rules="[{ pattern: telTest, message: '请填写正确的手机号码' }]"/>

        <van-field
          v-model="sms"
          center
          clearable
          label="验 证 码"
          placeholder="请输入短信验证码"
          name="sms"
          :rules="[{ required: true, message: '请填写验证码' }]">

          <template #button>
            <van-button size="small"
              type="info"
              @click="getSms"
              :disabled="disabled"
              :text="countdown < 61 ? countdown + '秒后获取' : captchaTxt"
            ></van-button>
          </template>
        </van-field>
      </div>
      <div class="loginBtn">
        <van-button type="info" block native-type="submit" v-if="isLogin">登录</van-button>
        <van-button type="info" block native-type="submit" v-else>注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getSms, toLogin, toRegister } from '@/api/account'
import { Toast } from 'vant'
export default {
  data () {
    return {
      isLogin: true,
      idnoTest: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      telTest: /^1[3456789]\d{9}$/,
      captchaTxt: '获取验证码',
      countdown: 61,
      disabled: false,
      idNumber: '',
      tel: '',
      sms: ''
    }
  },
  methods: {
    getSms () {
      const $this = this
      console.log('tel', $this.tel)
      if (!(/^1[3456789]\d{9}$/.test($this.tel))) {
        Toast('请输入正确的手机号码')
        return
      }
      $this.disabled = true
      $this.countdown--
      const timeClock = setInterval(function () {
        $this.countdown--
        if ($this.countdown < 1) {
          clearInterval(timeClock)
          $this.countdown = '61'
          $this.disabled = false
        }
      }, 1000)
      const brandId = JSON.parse(localStorage.getItem('BRANDMSG')).brandId
      getSms($this.tel, brandId).then(res => {
        console.log(res)
        // Toast(res.data.data.message)
      })
    },
    toLogin (values) {
      const $this = this
      Toast.loading({
        message: '正在登录...',
        forbidClick: true,
        duration: 0
      })
      console.log('values', values)
      let pramas = {
        'brandId': JSON.parse(localStorage.getItem('BRANDMSG')).brandId,
        'code': values.sms,
        'idNo': values.idNumber,
        'phone': values.tel
      }
      toLogin(pramas).then(res => {
        console.log('login', res)
        if (res.data.code === 10000) {
          Toast.clear()
          Toast.success('登录成功')
          $this.$router.replace({ name: 'index' })
          localStorage.setItem('TOKEN', res.data.data.token)
          localStorage.setItem('ROLLKEY', res.data.data.rollkey)
          localStorage.setItem('SIGNCOUNT', res.data.data.sigenInfo.length)
        } else if (res.data.code === 10064) {
          // 需要注册的返回码
          toRegister(pramas).then(res => {
            console.log('register', res)
            if (res.data.code === 10000) {
              Toast.clear()
              Toast('您是新用户，已自动为您注册账号')
              $this.$router.replace({name: 'index'})
              localStorage.setItem('TOKEN', res.data.data.token)
              localStorage.setItem('ROLLKEY', res.data.data.rollkey)
            } else {
              Toast.clear()
              Toast.fail(res.data.message)
            }
          })
        } else {
          Toast.clear()
          Toast.fail(res.data.message)
        }
      }).catch(() => {
        Toast.fail('网络不给力呀')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .loginBtn{
    width: 80%;
    margin: 50px auto;
  }
  .loginBtn button{
    border-radius: 5px;
  }
</style>
